import React, { Component } from 'react';
import { List , Scroller} from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import './index.scss';


var Obj = React.createClass({
    getInitialState:function(){
        return {
            dataExpire:[{origin:"origin"}],
            renderPage:""
        }
    },
    componentWillMount:function(){
        var self = this;
        fetch('../mock/work.json')
        .then(function(response) {
            if (response.status >= 400) {
                throw new Error("Bad response from server");
            }
            return response.json();
        })
        .then(function(stories) {
            self.setState({
                dataExpire:stories
            })
            
        });
        
    },
    render:function() {
        var cardCont = this.state.dataExpire.map(function(ele,index){
            // console.log(ele,index);
            return (
                    <div className="yo-card">
                        <div className="extra">
                            <img 
                                className="img-cover" 
                                src={ele.src} 
                                alt="示例图片"/>
                            <div className="img-descMy">
                                <p className="desc">{ele.name}</p>
                            </div>
                        </div>
                        <div className="cardText">
                            <p className='type'><span>{ele.category}</span></p>
                            <p>工作时间:<span>{ele.time}</span></p>
                            <p>公司成员:<span>{ele.peoples}</span></p>
                        </div>
                    </div>
            )
        }) 
        return (
            <div className="yo-flex">
                <Scroller>
                {cardCont}

                </Scroller>
            </div>
        )
    }
})


export default Obj;
